<!--  -->
<template>
  <v-container>
    <v-tabs :value="2">
      <v-tab>简单上传(PutObject)</v-tab>
      <v-tab>表单上传(PostObject)</v-tab>
      <v-tab>组件</v-tab>
        <v-tab-item>
          简单上传(PutObject)
        </v-tab-item>
        <v-tab-item>
          <p class="title">表单上传(PostObject)</p>
          <p><code>{{policy}}</code></p>
          <v-form>
            <v-file-input label="File input" v-model="file"></v-file-input>
            <v-btn @click="submit">提交</v-btn>
          </v-form>
        </v-tab-item>
        <v-tab-item>
          <AliyunOSSComponent v-model="images" :cover.sync="cover"></AliyunOSSComponent>
        </v-tab-item>
    </v-tabs>
  </v-container>
</template>

<script>
import { fetchAliyunOSSPolicy } from '@/api/attachment.js'
import request from '@/utils/request'
import AliyunOSSComponent from '@/components/Form/AliyunOSS.vue'
export default {
  name: 'AliyunOSS',
  components: { AliyunOSSComponent },
  data: function () {
    return {
      policy: {},
      formData: {},
      images: [
        // 'https://picsum.photos/500/500',
        // 'https://picsum.photos/900/500',
        // 'https://picsum.photos/800/700'
      ],
      cover: '',
      file: []
    }
  },
  created: function () {
    fetchAliyunOSSPolicy().then(res => {
      this.policy = res.data
    })
  },
  computed: {},
  methods: {
    submit: function() {
      let formdata = new FormData()
      formdata.append('OSSAccessKeyId', this.policy.accessid)
      formdata.append('policy', this.policy.policy)
      formdata.append('Signature', this.policy.signature)
      formdata.append('key', 'test/' + this.file.name)
      formdata.append('file', this.file)
      let headers = {
        'Content-Type': 'multipart/form-data'
      }
      request({
        url: this.policy.host,
        method: 'POST',
        headers: headers,
        data: formdata
      })
    }
  }
}
</script>
<style scoped>
</style>
